<template>
    <div class="hello">
        <a-card style="width:600px">
            <a-form
                name="custom-validation"
                ref="formRef"
                :model="formState"
                :rules="rules"
                v-bind="layout"
                @finish="handleFinish"
                @finishFailed="handleFinishFailed"
            >
                <a-form-item has-feedback label="账号" name="userName">
                    <a-input v-model:value="formState.userName" type="text" autocomplete="off" />
                </a-form-item>
                <a-form-item has-feedback label="密码" name="passWord">
                    <a-input v-model:value="formState.passWord" type="password" autocomplete="off" />
                </a-form-item>

                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" html-type="submit" :loading="loading" block>登录</a-button>
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button @click="resetForm" block>重置56589895</a-button>
                </a-form-item>
            </a-form>
        </a-card>
    </div>
</template>
<script>
import { useRouter } from "vue-router";
import { defineComponent, reactive, ref } from 'vue';
export default defineComponent({
    setup() {
        let loading = ref(false)
        const router = useRouter()
        const formRef = ref();
        const formState = reactive({
            passWord: '',
            userName: '',
        });
        let validatePass = async (rule, value) => {
            if (value === '') {
                return Promise.reject('请输入正确密码');
            } else {

                return Promise.resolve();
            }
        };

        let validateUser = async (rule, value) => {
            if (value === '') {
                return Promise.reject('请输入正确账号');
            } else {

                return Promise.resolve();
            }
        };

        const rules = {
            passWord: [
                {
                    type: 'number',
                    required: true,
                    validator: validatePass,
                    trigger: 'blur',
                },
            ],
            userName: [
                {
                    type: 'string',
                    required: true,
                    validator: validateUser,
                    trigger: 'blur',
                },
            ],
        };
        const layout = {
            labelCol: {
                span: 4,
            },
            wrapperCol: {
                span: 14,
            },
        };
        const handleFinish = () => {
            loading.value = true
            localStorage.setItem('ele_login', '123456')
            setTimeout(() => {
                router.replace({ path:'/layout'})
                loading.value = false
            }, 1000)
        };

        const handleFinishFailed = errors => {
            console.log(errors);
        };

        const resetForm = () => {
            formRef.value.resetFields();
            loading.value = false
        };

        return {
            loading,
            formState,
            formRef,
            rules,
            layout,
            handleFinishFailed,
            handleFinish,
            resetForm,
        };
    },
});
</script>

<style scoped>
.ant-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>
